<template>
  <el-image
    v-if="img"
    :style="styleCss"
    :src="img"
    :preview-src-list="[img]"
  />
</template>

<script>
/**
   *改组件用于查看图片 可方法功能
   */
import { IsPicture } from '@/utils/index'

export default {
  name: 'PreviewImg',
  props: {
    url: {
      type: String,
      required: true
    },
    styleImg: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      img: '',
      styleCss: ''
    }
  },
  created() {},
  mounted() {
    const imgUrl = this.$store.state.app && this.$store.state.app.imgbase ? this.$store.state.app.imgbase : process.env.VUE_APP_BASE_API
    if (this.hasHttp(this.url)) {
      this.img = this.url
    } else {
      this.img = this.url && IsPicture(this.url) ? imgUrl + this.url : ''
    }
    if (this.styleImg.list) { // 如果是图片列表
      const sizeWidth = this.styleImg.sizeWidth ? this.styleImg.sizeWidth + 'px' : '100%'
      const sizeHeight = this.styleImg.sizeHeight ? this.styleImg.sizeHeight + 'px' : '400px'
      this.styleCss = `width:${sizeWidth};height:${sizeHeight}`
    } else {
      let size = 100
      if (this.styleImg.size) {
        size = this.styleImg.size
      }
      this.styleCss = 'width: ' + size + 'px; height: ' + size + 'px'
    }
  },
  methods: {
    hasHttp(url) {
      return url && url !== undefined && url !== 'undefined' ? (url.substr(0, 7).toLowerCase() === 'http://' || url.substr(0, 8).toLowerCase() === 'https://') : false
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
.input-new-tag {
  width: 180px;
  vertical-align: bottom;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar-uploader-icon:hover{
  border-color: #409EFF;
  border-radius: 6px;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

</style>
